<template>
  <div id="chargesDetails">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="charges_hd">
      <p>{{routeName}}</p>
    </div>
    <div class="charges_box">
      <div class="charges_list" v-if="orderType == '拼车'">
        <p class="charges_list_one">
          起步价({{passengersNum }}人)
          <span>{{basePrice}}元</span>
        </p>
        <p class="charges_list_two">拼车：{{carpoolPrice}}元/人</p>
      </div>
      <div class="charges_list" v-else>
        <p class="charges_list_one">
          起步价({{carType}})
          <span>{{startPrice}}元</span>
        </p>
        <p class="charges_list_two">包车：{{startPrice}}元</p>
      </div>
      <div class="charges_list" v-show="floatTotalPricestatus">
        <div v-if="orderType == '包车'">
          <div v-if="beyondMileage">
            <p class="charges_list_one" v-if="carType == '公务车'">
              里程费({{gongwuStartMileage}}公里)
              <span>{{floatTotalPrice}}元</span>
            </p>
            <p class="charges_list_one" v-else>
              里程费({{shangwuStartMileage}}公里)
              <span>{{floatTotalPrice}}元</span>
            </p>
            <p class="charges_list_two">超出里程({{beyondMileage}}公里)费用：{{ floatPrice }}元/公里</p>
          </div>
        </div>
        <!-- <p class="charges_list_one">里程费(已超出{{beyondMileage}}公里)<span>{{floatTotalPrice}}元</span></p>
                <p class="charges_list_two" v-if='orderType == "拼车"'>超出里程费：{{ floatPrice }}元/公里</p>
        <p class="charges_list_two" v-else>超出里程({{ shangwuStartMileage }}公里)费用：{{ floatPrice }}元/公里</p>-->
      </div>
      <div class="charges_list" v-show="sitePriceTotalstatus">
        <p class="charges_list_one">
          站点浮动费
          <span>{{sitePriceTotal}}元</span>
        </p>
        <p class="charges_list_two">站点上车有浮动费用</p>
      </div>
      <div class="charges_list" v-show="fencePriceTotalstatus">
        <p class="charges_list_one" v-if="orderType == '拼车'">
          围栏浮动费
          <span>{{fencePriceTotal}}元</span>
        </p>
      </div>
      <div class="charges_list" v-show="adjustFlag">
        <p class="charges_list_one">
          运价调整({{adjustRadix}})
          <span>{{adjustPrice}}元</span>
        </p>
        <p class="charges_list_two">{{adjustReason}}</p>
      </div>
      <div class="charges_list" v-if="orderType == '包车'">
        <p class="charges_list_one" v-show="IssleepPrice">
          高速费
          <span>{{sleepPrice}}元</span>
        </p>
      </div>
      <p class="chargesAmt">合计：{{orderAmt}}元</p>
      <p class="charges_coupon" v-show="couponPricestatus">
        优惠券抵扣
        <span>-{{couponPrice}}元</span>
      </p>
      <p class="estimateAmt" v-if="payType == '预计支付'">
        预计支付
        <span>{{payAmt}}元</span>
      </p>
      <div v-else>
        <p class="charges_coupon" style="color:#666">
          {{payType}}
          <span>{{payAmt}}元</span>
        </p>
        <p class="estimateAmt">
          实际支付
          <span>{{payAmt}}元</span>
        </p>
      </div>
      <p class="faremin">*车费计算四舍五入取小数点后两位</p>
      <p class="seeValuationRules_one" @click="ValuationRulesBtn">查看计价规则</p>
    </div>
    <md-popup v-model="rulesPop" position="bottom">
      <md-popup-title-bar title="计价规则" cancel-text="关闭" @cancel="hidePopUp()"></md-popup-title-bar>
      <div class="rules_ct">
        <div class="charges_hd">
          <p>{{routeName}}</p>
        </div>
        <div class="charges_box">
          <div class="charges_list" v-if="orderType == '拼车'">
            <p class="charges_list_one">起步价(分时段)</p>
            <p class="charges_list_two">
              普通时段
              <span>{{carpoolPrice}}元/人</span>
            </p>
            <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
              <b v-if="priceList[index].unitPrice !=0.0">
                {{priceList[index].startTime}}-{{priceList[index].endTime}}
                <span>{{ priceList[index].unitPrice }}{{priceList[index].unit==="2" ? "%" : "元/人"}}</span>
              </b>
            </p>
          </div>
          <div v-else>
            <div class="charges_list">
              <p class="charges_list_one">起步价(分时段)</p>
              <p class="charges_list_two">
                普通时段
                <span>{{gongwuStartPrice}}元</span>
              </p>
              <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
                <b v-if="priceList[index].gongwuPrice !=0.0">
                  {{priceList[index].startTime}}-{{priceList[index].endTime}}
                  <span>{{ priceList[index].gongwuPrice }}{{priceList[index].unit==="2" ? "%" : "元"}}</span>
                </b>
              </p>
              <p class="charges_list_two">公务车最多可乘坐4人</p>
            </div>
            <div class="charges_list">
              <p class="charges_list_one">起步价(分时段)</p>
              <p class="charges_list_two">
                普通时段
                <span>{{shangwuStartPrice}}元</span>
              </p>
              <p class="charges_list_two" v-for="(item,index) in priceList" :key="index" v-show="priceList.length">
                <b v-if="priceList[index].shangwuPrice !=0.0">
                  {{priceList[index].startTime}}-{{priceList[index].endTime}}
                  <span>{{ priceList[index].shangwuPrice }}{{priceList[index].unit==="2" ? "%" : "元"}}</span>
                </b>
              </p>
              <p class="charges_list_two">商务车最多可乘坐6人</p>
            </div>
          </div>
          <div class="charges_list">
            <p class="charges_list_one">
              超出里程费
              <span class="charges_out">{{floatPrice}}元/公里</span>
            </p>
            <div v-if="orderType === '拼车'">
              <p class="charges_list_two">{{ allowOverMillageStart }}，{{ allowOverMillageEnd }}</p>
            </div>
            <div v-else>
              <p class="charges_list_two" v-if="carType == '公务车'">起步里程{{gongwuStartMileage}}公里(超出后收取超出里程费用)</p>
              <p class="charges_list_two" v-else>起步里程{{shangwuStartMileage}}公里(超出后收取超出里程费用)</p>
            </div>
          </div>
          <div class="charges_list" v-if="orderType == '包车'">
            <p class="charges_list_one" v-show="IssleepPrice">
              高速费
              <span>{{sleepPrice}}元</span>
            </p>
          </div>
          <div class="charges_list">
            <p class="charges_list_one">取消行程手续费</p>
            <p class="charges_list_two">
              普通时段
              <span>{{orderCanceFee}}</span>
            </p>
            <p class="charges_list_two" v-for="(item,index) in timePriceCancelItemsList" :key="index" v-show="timePriceCancelItemsList.length">
              <b v-if="timePriceCancelItemsList[index].unitPrice !=0.0">
                {{timePriceCancelItemsList[index].startTime}}-{{timePriceCancelItemsList[index].endTime}}
                <span>{{timePriceCancelItemsList[index].unitPrice}}{{timePriceCancelItemsList[index].unit==="2" ? "%" : "元"}}</span>
              </b>
            </p>
            <p class="charges_list_two">行程被指派司机后，取消行程会收取手续费</p>
          </div>
        </div>
      </div>
    </md-popup>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Popup, PopupTitleBar, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      rulesPop: false,
      title: '费用明细',
      routeName: '', // 路线名称
      orderAmt: '0.00', // 订单费用
      couponPrice: '0.00', // 优惠券金额
      payAmt: '0.00', // 实际支付金额
      carpoolPrice: '0.00', // 拼车起步价
      passengersNum: 1, // 人数
      basePrice: '0.00', // 拼车起步总价
      beyondMileage: '1', // 超出里程数
      floatPrice: '0.00', // 超出里程费/每公里
      floatTotalPrice: '0.00', // 超出里程总费用
      orderType: '',
      payType: '', // 订单类型
      carType: '', // 包车类型
      shangwuStartPrice: '0.00', // 商务车起步价
      shangwuStartMileage: '0', // 商务车起步里程数
      gongwuStartPrice: '0.00', // 公务车起步价
      gongwuStartMileage: '0', // 公务车起步里程数
      banJump: true, // 禁止跳转到计价规则
      sleepPrice: '', // 高速费
      IssleepPrice: false, // 是否显示高速费
      IsTopbar: true,
      couponPricestatus: true,
      fencePriceTotal: '0.00', // 围栏浮动总价
      sitePriceTotal: '0.00', // 站点浮动总价
      floatTotalPricestatus: true,
      sitePriceTotalstatus: true,
      fencePriceTotalstatus: true,
      adjustFlag: false, // 是否有调整价格
      adjustRadix: '',
      adjustReason: '',
      adjustPrice: '',
      orderCanceFee: '',
      carpoolFenceDistanceStart: '0',
      carpoolFenceDistanceEnd: '0',
      priceList: [], // 起步价时段列表
      timePriceCancelItemsList: [] // 取消行程时间段列表
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    if (this.$route.query.orderno) {
      let params = {
        order_no: this.$route.query.orderno,
        user_coupon_id: this.$route.query.couponid
      };
      Loading.show();
      http.post('pakj/order/getOrderCost', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.routeName = res.data.data.routeName;
          this.orderType = res.data.data.orderType;
          this.passengersNum = res.data.data.passengersNum;
          this.carpoolPrice = res.data.data.carpoolPrice;
          this.basePrice = res.data.data.basePrice;
          this.carType = res.data.data.carType;
          this.beyondMileage = res.data.data.beyondMileage;
          this.floatTotalPrice = res.data.data.floatTotalPrice;
          this.floatPrice = res.data.data.floatPrice;
          this.sitePriceTotal = res.data.data.sitePriceTotal;
          this.shangwuStartPrice = res.data.data.shangwuStartPrice; // 商务车起步价
          this.shangwuStartMileage = res.data.data.shangwuStartMileage; // 商务车起步里程
          this.gongwuStartPrice = res.data.data.gongwuStartPrice; // 公务车起步价
          this.gongwuStartMileage = res.data.data.gongwuStartMileage; // 公务车起步里程
          this.sleepPrice = res.data.data.sleepPrice; // 高速费
          this.orderAmt = res.data.data.orderAmt;
          this.couponPrice = res.data.data.couponPrice;
          this.payType = res.data.data.payType;
          this.payAmt = res.data.data.payAmt;
          this.fencePriceTotal = res.data.data.fencePriceTotal;
          this.carpoolFenceDistanceStart = res.data.data.carpoolFenceDistanceStart;
          this.carpoolFenceDistanceEnd = res.data.data.carpoolFenceDistanceEnd;
          this.orderCanceFee = res.data.data.orderCanceFee;
          this.timePriceItems = res.data.data.timePriceItems;
          this.timePriceCancelItems = res.data.data.timePriceCancelItems;
          if (
            this.floatTotalPrice === '0.00' ||
            this.floatTotalPrice === '0' ||
            this.floatTotalPrice === '0.0' ||
            this.floatTotalPrice === undefined
          ) {
            this.floatTotalPricestatus = false;
          }
          if (
            this.sitePriceTotal === '0.00' ||
            this.sitePriceTotal === '0' ||
            this.sitePriceTotal === '0.0' ||
            this.sitePriceTotal === undefined
          ) {
            this.sitePriceTotalstatus = false;
          }
          if (
            this.fencePriceTotal === '0.00' ||
            this.fencePriceTotal === '0' ||
            this.fencePriceTotal === '0.0' ||
            this.fencePriceTotal === undefined
          ) {
            this.fencePriceTotalstatus = false;
          }
          if (
            this.couponPrice === '0.00' ||
            this.couponPrice === '' ||
            this.couponPrice === '0.0' ||
            this.couponPrice === undefined
          ) {
            this.couponPricestatus = false;
          }
          if (res.data.data.adjustFlag === '1') {
            this.adjustFlag = true;
            let adjustDetail = JSON.parse(res.data.data.adjustDetail);
            this.adjustRadix = adjustDetail.adjustRadix;
            this.adjustReason = adjustDetail.adjustReason;
            this.adjustPrice = adjustDetail.adjustPrice;
          }
          if (this.sleepPrice !== '0') {
            this.IssleepPrice = true;
          }
          if (this.timePriceItems) {
            let timePriceItems = JSON.parse(this.timePriceItems);
            for (let k in timePriceItems) {
              this.priceList.push(timePriceItems[k]);
            }
          }
          if (this.timePriceCancelItems) {
            let timePriceCancelItems = JSON.parse(this.timePriceCancelItems);
            for (let k in timePriceCancelItems) {
              this.timePriceCancelItemsList.push(timePriceCancelItems[k]);
            }
          }
          console.log(res.data);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    ValuationRulesBtn() {
      this.rulesPop = true; // 计价规则改成弹窗
      // this.$router.replace({
      //     name: "ValuationRules",
      //     query: {
      //             orderno: this.$route.query.orderno
      //         }
      // })
    },
    hidePopUp() {
      this.rulesPop = false;
    }
  },
  computed: {
    startPrice() {
      if (this.carType === '公务车') {
        return this.gongwuStartPrice;
      } else {
        return this.shangwuStartPrice;
      }
    },
    allowOverMillageStart() {
      if (this.carpoolFenceDistanceStart === '0' || this.carpoolFenceDistanceStart === '0.0') {
        return '仅限起点围栏内下单';
      } else {
        return '超出起点围栏' + this.carpoolFenceDistanceStart + '公里可下单';
      }
    },
    allowOverMillageEnd() {
      if (this.carpoolFenceDistanceEnd === '0' || this.carpoolFenceDistanceEnd === '0.0') {
        return '仅限终点围栏内下单';
      } else {
        return '超出终点围栏' + this.carpoolFenceDistanceEnd + '公里可下单';
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails {
}

.charges_hd {
  background-color: #fff;
  padding-top: 20px;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 36px;
  color: #333;
  padding-bottom: 40px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.charges_list_two span {
  float: right;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  text-align: right;
}

.seeValuationRules_one {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  margin: 108px auto 0px auto;
  text-align: center;
  font-size: 30px;
  color: #666;
}

.rules_ct {
  background-color: #fff;
  height: 91.8vh;
}
</style>
